<!DOCTYPE html>                
<html>
	<head>
		<meta charset="utf-8" />
		<title>小米首页</title>
		<!-- 二.定义样式 复杂型页面根据页面三个简易结构，3次样式引用 -->
		<link rel="stylesheet" href="css/header.css">
		<link rel="stylesheet" href="css/main.css">
		<link rel="stylesheet" href="css/footer.css">
		<!-- 增加一个样式 统一去掉页面默认效果-->
		<link rel="stylesheet" href="css/public.css">
	</head>
	<body>
		<!-- 一.设计小米整体简易结构：页头、主体、页尾
		    使用结构化标记：header、main、footer
		 -->
		<header>
			<!-- 控制页面：中控区 -->
			<div id="wrapper">
				<div class="head_left">
					<ul>
						<li><a href="#">小米网</a></li>
						<li><a href="#">MIUI</a></li>
						<li><a href="#">米聊</a></li>
						<li><a href="#">游戏</a></li>
						<li><a href="#">多看阅读</a></li>
						<li><a href="#">云服务</a></li>
						<li><a href="#">小米移动版</a></li>
						<li><a href="#">问题反馈</a></li>
						<li><a href="#" class="c">Select Region</a></li>
					</ul>
				</div>
				<div class="head_right">
					<ul>
						<!-- 精灵图使用  icon图标
						 1.使用文本样式元素补位：i、b、s、u
						 2.使用矢量图，精灵图.png【不失真】
						 优点：避免多次命名、减少服务器请求
						 3.如果使用补位元素【行元素】，必须内边距【撑大】
						 4.定位
						 -->
						<li class="li_right"><i class="shop"></i><a href="#" class="fix">购物车(0)</a></li>
						<li><a href="#" class="c">注册</a></li>
						<li><a href="#">登录</a></li>
					</ul>
				</div>
			</div>
		</header>
		<main>
			<!-- 面包屑导航  nav结构化元素：导航-->
			<nav>面包屑导航:切片7刀  div</nav>
			<!-- 左栏区 -->
			<aside></aside>
			<!-- 轮播图 figure结构化元素：图片、图表、代码片段-->
			<figure>轮播图区</figure>
			<!--  -->
		</main>
		<footer>页尾</footer>
	</body>
</html>
